<template>
  <el-card class="box-card">
    <div class="main">
      <!-- 左侧二维码模块 -->
      <div class="QRcode" @click="removeObstructions">
        <h4>扫描二维码登陆</h4>
        <div class="qrImge" :style="{ 'pointer-events': changeEvent }">
          <div class="opacityLayout" v-show="isAcitve"></div>
        </div>

        <p>
          请使用<span style="color: #00aeec">哔哩哔哩客户端</span><br />
          扫码登陆或扫码下载APP
        </p>
      </div>
      <!-- 右侧用户登陆模块 -->
      <div class="tab_box">
        <div class="inputSection">
          <!-- tab切换控件 -->
          <el-tabs
            v-model="activeName"
            class="demo-tabs"
            @tab-click="handleClick"
            stretch
          >
            <!-- 密码登陆表单区域 -->
            <el-tab-pane label="密码登陆" name="login">
              <el-form
                :model="loginForm"
                status-icon
                :rules="rules"
                ref="loginForm"
                label-width="60px"
                class="demo-ruleForm"
                size="large"
              >
                <el-form-item label="账号" prop="acc">
                  <el-input
                    type="text"
                    v-model="loginForm.acc"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="pass">
                  <el-input
                    type="password"
                    v-model="loginForm.pass"
                    autocomplete="off"
                    @focus="showImage"
                    @blur="hideenImage"
                  ></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button class="same" @click="toRegister">注册</el-button>
                  <el-button
                    class="same"
                    type="primary"
                    @click="submitForm('loginForm')"
                    >登陆</el-button
                  >
                </el-form-item>
              </el-form>
            </el-tab-pane>

            <!-- 短信登陆表单区域 -->
            <el-tab-pane label="短信登陆" name="register">
              <el-form
                :model="registerForm"
                status-icon
                :rules="rules"
                ref="registerForm"
                label-width="60px"
                class="demo-ruleForm"
                size="large"
              >
                <el-form-item label="+86" prop="acc">
                  <el-input
                    type="text"
                    v-model="registerForm.acc"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="pass">
                  <el-input
                    type="password"
                    v-model="registerForm.pass"
                    autocomplete="off"
                    @focus="showImage"
                    @blur="hideenImage"
                  ></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button
                    class="same center"
                    type="primary"
                    @click="submitForm('registerForm')"
                    >登陆/注册</el-button
                  >
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="otherLogin">
          <p>其他方式登录</p>
          <div class="to">
            <div class="wechat"></div>
            <div class="webo"></div>
            <div class="qq"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="noShow_title">
      <div class="left" :class="leftImageShow"></div>
      <div class="right" :class="rightImageShow"></div>
      <p>
        未注册过哔哩哔哩的手机号，我们将自动帮你注册账号
        <br />
        登录或完成注册即代表你同意<span style="color: #00a1d6">用户协议</span
        >和<span style="color: #00a1d6">隐私政策</span>
      </p>
    </div>
  </el-card>
</template>

<script>
import api from "../api";

export default {
  data() {
    // 建立表单验证规则
    let checkAccount = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("账号不能为空"));
      }
      if (value.length < 3 || value.length > 12) {
        return callback(new Error("账号格式有误"));
      }
      callback();
    };
    let checkPassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      }
      callback();
    };

    return {
      activeName: "login",
      isAcitve: false,
      changeEvent: "auto",
      leftImageShow: "leftImageShow",
      rightImageShow: "rightImageShow",
      loginForm: {
        acc: "",
        pass: "",
      },
      registerForm: {
        acc: "",
        pass: "",
      },
      rules: {
        acc: [{ validator: checkAccount, trigger: "blur" }],
        pass: [{ validator: checkPassword, trigger: "blur" }],
      },
    };
  },
  mounted() {
    // 为二维码设置失效时间
    setTimeout(() => {
      this.isAcitve = true;
      this.changeEvent = "none";
    }, 10000);

    // 检测是否存在token，如在则跳转至首页
    const localStorages = localStorage.getItem("token");
    if (localStorages) {
      this.$router.replace("/bhome");
    }
  },
  watch: {
    // 监听二维码过期变化
    isAcitve(newQRActive, oldQRActive) {
      setTimeout(() => {
        this.isAcitve = true;
        this.changeEvent = "none";
      }, 10000);
    },
  },
  methods: {
    // 检查Tab标签是否成功切换
    handleClick(tab, event) {
      let beforeTabId = event.target.getAttribute("id");
      let tabId = beforeTabId.split("-")[1];
      this.activeName = tabId;
      console.log(this.activeName);
    },
    // 发送表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.activeName === "login") {
            console.log("登录页面");
            // 登陆
            api.login(this.loginForm).then((res) => {
              if (res.data.status === 200) {
                console.log(res.data);
                this.$store.commit("updataUser", res.data);
                this.$router.replace("/bhome");
                this.$message({
                  message: "登陆成功",
                  type: "success",
                });
              } else {
                this.$message({
                  message: "登陆失败,账号或密码错误",
                  type: "warning",
                });
              }
            });
          } else if (this.activeName === "register") {
            api.register(this.registerForm).then((res) => {
              console.log(res);
              if (res.data.status === 200) {
                this.$store.commit("updataUser", res.data);
                this.$router.replace("/bhome");
                this.$message({
                  message: "注册成功",
                  type: "success",
                });
              } else {
                this.$message({
                  message: "注册失败，用户已经存在",
                  type: "warning",
                });
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 切换到注册Tab栏，即短信登陆
    toRegister() {
      this.activeName = "register";
    },
    // 移除二维码遮挡物
    removeObstructions() {
      this.isAcitve = false;
      this.changeEvent = "auto";
    },
    // 显示两侧图片
    showImage() {
      this.leftImageShow = "leftImagehidden";
      this.rightImageShow = "rightImagehidden";
    },
    // 隐藏两侧图片
    hideenImage() {
      this.leftImageShow = "leftImageShow";
      this.rightImageShow = "rightImageShow";
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  width: 60%;
  height: 56vh;
  margin: 10rem auto;
  .main {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .QRcode {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      width: 40%;
      height: 37vh;
      cursor: pointer;
      border-right: 1px solid rgb(230, 230, 230);

      .qrImge {
        width: 47%;
        height: 60%;
        background: url("../../public/images/Login/qr.png") no-repeat center 0;
        background-position: center 0;
        background-size: cover;
        position: relative;
        border: 1px solid rgba(212, 212, 212, 0.671);
      }
      .qrImge:hover {
        background: url("../../public/images/Login/qrCheck.png") no-repeat
          center 0;
        background-position: center 0;
        background-size: cover;
      }
      h4 {
        color: rgb(112, 112, 112);
      }
      p {
        font-size: 0.75rem;
      }
    }
    .tab_box {
      display: block;
      width: 60%;
      height: 37vh;
      margin: 10px;

      .inputSection {
        display: inline-block;
        width: 100%;
        height: 25vh;
      }

      .otherLogin {
        width: 100%;
        height: 12vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 5px 0;
        p {
          text-align: center;
          font-size: 0.8rem;
        }
        .to {
          width: 90%;
          height: 8vh;
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          .wechat {
            width: 32px;
            height: 32px;
            background: url("../../public/images/Login/wechat.png") no-repeat center 0;
            background-position: center 0;
            background-size: cover;
          }
          .wechat::after {
            content: "微信登陆";
            display: inline-block;
            width: 70px;
            height: 32px;
            position: relative;
            left: 40px;
            top: 5px;
          }
          .webo {
            width: 32px;
            height: 32px;
            background: url("../../public/images/Login/weibo.png") no-repeat center 0;
            background-position: center 0;
            background-size: cover;
          }
          .webo::after {
            content: "微博登陆";
            display: inline-block;
            width: 70px;
            height: 32px;
            position: relative;
            left: 40px;
            top: 5px;
          }
          .qq {
            width: 32px;
            height: 32px;
            background: url("../../public/images/Login/qq.png") no-repeat center 0;
            background-position: center 0;
            background-size: cover;
          }
          .qq::after {
            content: "QQ登陆";
            display: inline-block;
            width: 70px;
            height: 32px;
            position: relative;
            left: 40px;
            top: 5px;
          }
        }
      }
    }

    .demo-ruleForm {
      width: 400px;
      margin: 0 auto;
    }
    .same {
      width: 148px;
      height: 37px;
      border-radius: 8px;
    }
    .center {
      text-align: center;
      margin-left: 4rem;
    }
    .opacityLayout {
      width: 100%;
      height: 100%;
      background-color: rgb(255, 255, 255);
      position: absolute;
      z-index: 9999;
      opacity: 0.7;
    }
    .opacityLayout::after {
      content: "二维码已过期请点击刷新";
      width: 50%;
      position: absolute;
      z-index: 9999;
      top: 40%;
      left: 25%;
      text-align: center;
      color: black;
    }
  }

  .noShow_title {
    height: 13vh;
    width: 100%;

    p {
      height: 80px;
      line-height: 40px;
      width: 500px;
      margin: 1rem auto;
      text-align: center;
      font-size: 0.75rem;
      color: rgb(165, 165, 165);
    }
    .left {
      float: left;
      width: 155px;
      height: 155px;
      position: relative;
      top: -29px;
      left: -20px;
    }
    .leftImageShow {
      background: url("../../public/images/Login/leftshow.png") no-repeat center 0;
      background-position: center 0;
      background-size: cover;
    }
    .leftImagehidden {
      background: url("../../public/images/Login/lefthidden.png") no-repeat center 0;
      background-position: center 0;
      background-size: cover;
    }
    .right {
      float: right;
      width: 155px;
      height: 155px;
      position: relative;
      top: -29px;
      right: -20px;
    }
    .rightImageShow {
      background: url("../../public/images/Login/rightshow.png") no-repeat center 0;
      background-position: center 0;
      background-size: cover;
    }
    .rightImagehidden {
      background: url("../../public/images/Login/righthidden.png") no-repeat center 0;
      background-position: center 0;
      background-size: cover;
    }
  }
}
</style>
